import React, { useState, useEffect } from 'react';
import styles from './index.less';
import CardCommon from '@/compontents/cardCommon';
import lhTool from 'lh-tool';
import api from '@/http/api';
import { PlusOutlined } from '@ant-design/icons';
import {
  Button,
  Form,
  Input,
  Upload,
  DatePicker,
  message,
  Select,
  Switch,
  InputNumber,
} from 'antd';
import moment from 'moment';
const { nsTelTextAdd, nsTelTextEdit } = api;
export default (props: any) => {
  const [form] = Form.useForm();
  // form.setFieldsValue()

  const { manageId, schoolId } = JSON.parse(sessionStorage.info).userInfo;
  const isAdd = props.history.location.state.isAdd;
  const { initData } = props.history.location.state;
  // 商家类型列表
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 4, span: 16 },
  };
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );
  const [fileList2, seFileList2]: any = useState([]);
  const onchange2 = (e: any) => {
    const fileLists = e.fileList;
    const len = fileLists.length;
    if (e.file.status === 'done') {
      const list: any = [...fileList2].splice(0, len - 1);
      list.push({
        uid: new Date().getTime(),
        url: e.file.response.data.src,
      });
      seFileList2(list);
    } else {
      seFileList2(fileLists);
    }
  };

  const onFinish = (v: any) => {
    if (fileList2.length) {
      let srcs2 = '';
      fileList2.map((item: any) => {
        srcs2 += `${item.url}&`;
      });
      srcs2 = srcs2.slice(0, -1);
      const { title, price, infoList, cont } = v;
      const params = {
        uSchoolId: schoolId,
        title,
        price,
        infoList,
        cont,
        src: srcs2,
      };
      if (isAdd) {
        nsTelTextAdd({ ...params }).then(_ => {
          props.history.push({
            pathname: '/nsTel',
          });
        });
      } else {
        nsTelTextEdit({ ...params, id: initData.id }).then(res => {
          props.history.push({
            pathname: '/nsTel',
          });
        });
      }
    } else {
      if (!fileList2.length) {
        message.error('请上传图片');
      }
    }
  };

  useEffect(() => {
    if (!isAdd) {
      const arr2: any = [];
      initData.src.split('&').map((item: any, i: any) => {
        arr2.push({
          uid: i,
          url: item,
        });
      });
      seFileList2(arr2);
    }
    return () => {};
  }, []);
  return (
    <CardCommon>
      <div className={styles.wrap}>
        <div className={styles.mark}>
          多个套餐标题之间用“|“隔开,多个套餐内容之间用“|“隔开
        </div>
        <Form
          className={styles.form}
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '请输入标题' }]}
            initialValue={isAdd ? '' : initData.title}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="套餐标题"
            name="infoList"
            rules={[{ required: true, message: '请输入套餐标题' }]}
            initialValue={isAdd ? '' : initData.infoList}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="套餐内容"
            name="cont"
            rules={[{ required: true, message: '请输入套餐内容' }]}
            initialValue={isAdd ? '' : initData.cont}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            rules={[{ required: true, message: '请输入价格' }]}
            initialValue={isAdd ? '' : initData.price}
          >
            <InputNumber min={0.01} />
          </Form.Item>
          <Form.Item
            label="商家列表图片（单张）"
            name="src"
            rules={[{ required: false, message: '商家列表图片（单张）' }]}
          >
            <Upload
              action={process.env.apiUrl + 'upload/image'}
              listType="picture-card"
              fileList={fileList2}
              // onPreview={this.handlePreview}
              onChange={onchange2}
            >
              {fileList2.length >= 1 ? null : uploadButton}
            </Upload>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </CardCommon>
  );
};
